import React from 'react'
import { inject, observer } from 'mobx-react';
import { toJS } from "mobx"
import { List, Bubble, DatePicker, Icon, Checkbox, Modal, ActivityIndicator, Tools } from 'weaver-mobile'
import { Form, RouteLayout } from 'weaver-mobile-page';
import { withRouter } from 'react-router-dom'

const ButtonGroup = RouteLayout.ButtonGroup;
const FormItem = List.FormItem;
const { DatePickerInput } = DatePicker;
const AgreeItem = Checkbox.AgreeItem;
const getLabel = Tools.getLabel;
@inject('wfAgentStore')
@withRouter
@observer
export default class BatchEdit extends React.Component {
    componentWillMount() {
        const { location, wfAgentStore } = this.props;
        const { getPageTitle, getBatchEditInfo } = wfAgentStore;
        const { pathname = "" } = location;
        getPageTitle(pathname);
        getBatchEditInfo({});///批量编辑

    }
    componentWillUpdate() {
        const { location, wfAgentStore } = this.props;
        const { getPageTitle } = wfAgentStore;
        const { pathname = "" } = location;
        getPageTitle(pathname);
    }
    componentWillUnmount() {
        const { setInitDatas } = this.props.wfAgentStore;
        setInitDatas({
            beginDate: null,
            endDate: null,
            beginTime: null,
            endTime: null
        });
    }

    getSearchs = () => {
        const { initDatas, setInitDatas } = this.props.wfAgentStore;
        const { batchEditDatas, beginDate, beginTime, endDate, endTime } = initDatas;

        let items = [];
        const { fields = {} } = batchEditDatas;
        let date = new Date();
        let month = '' + (date.getMonth() + 1);
        let day = '' + date.getDate();
        let year = '' + date.getFullYear();
        let hour = '' + date.getHours();
        let min = '' + date.getMinutes();
        if (month.length < 2) month = '0' + month;
        if (day.length < 2) day = '0' + day;
        if (hour.length < 2) hour = '0' + hour;
        if (min.length < 2) min = '0' + min;
        let nowDate = year + "-" + (date.getMonth() + 1) + "-" + month + "-" + day;
        if (fields.beginDate) {
            items.push(
                <FormItem
                    key={"beginDate"}
                    wrap="nowrap"
                    label={getLabel(740, "开始日期")}
                    extra={<Icon type="right" />}
                    content={(
                        <DatePickerInput
                            placeholder={getLabel(763, "不限")}
                            mode="date"
                            value={beginDate}
                            minDate={nowDate}
                            maxDate={endDate || "2030-12-30"}
                            key={"beginDate"}
                            onChange={date => {
                                setInitDatas({ "beginDate": date });
                            }}
                        />
                    )}
                />
            );
        }
        if (fields.beginTime) {
            items.push(
                <FormItem
                    key={"beginTime"}
                    wrap="nowrap"
                    label={getLabel(500371, "开始时间")}
                    extra={<Icon type="right" />}
                    content={(
                        <DatePickerInput
                            placeholder={getLabel(763, "不限")}
                            mode="time"
                            value={beginTime}
                            key={"beginTime"}
                            onChange={time => {
                                setInitDatas({ "beginTime": time });
                            }}
                        />
                    )}
                />
            );
        }
        if (fields.endDate) {
            items.push(
                <FormItem
                    key={"endDate"}
                    wrap="nowrap"
                    label={getLabel(741, "结束日期")}
                    extra={<Icon type="right" />}
                    content={(
                        <DatePickerInput
                            placeholder={getLabel(763, "不限")}
                            mode="date"
                            value={endDate}
                            key={"endDate"}
                            minDate={beginDate || nowDate}
                            maxDate="2030-12-30"
                            onChange={date => {
                                setInitDatas({ "endDate": date });
                            }}
                        />
                    )}
                />
            );
        }
        if (fields.endTime) {
            items.push(
                <FormItem
                    key={"endTime"}
                    wrap="nowrap"
                    label={getLabel(500372, "结束时间")}
                    extra={<Icon type="right" />}
                    content={(
                        <DatePickerInput
                            placeholder={getLabel(763, "不限")}
                            mode="time"
                            value={endTime}
                            key={"endTime"}
                            onChange={time => {
                                setInitDatas({ "endTime": time });
                            }}
                        />
                    )}
                />
            );
        }


        const group = (
            <Form style={{ height: '100%', background: "#ffffff" }} >
                <List>
                    {items}
                </List>
            </Form>
        )
        return group;
    }

    callback_verifyAgentOverlap = (callbakcdatas) => {
        const { saveBatchEditInfo, setInitDatas, initDatas } = this.props.wfAgentStore;
        const { batchEditParams } = initDatas;
        const { overlapCount = 0 } = callbakcdatas;
        if (overlapCount > 0) {
            let title = <span>{getLabel(82666, "当前代理设置与已有")} <span style={{ fontWeight: "bold", color: "red" }}>{overlapCount}</span> {getLabel(383526, "条代理设置重复请选择重复数据处理方式")}</span>;
            setInitDatas({ batchModalTitle: title, batchShowCheckModal: true })
        } else {
            saveBatchEditInfo(batchEditParams, this.callback_saveBatchEditInfo);
        }
    }
    callback_saveBatchEditInfo = (datas) => {
        const { setInitDatas } = this.props.wfAgentStore;
        setInitDatas({ selectedRowKeys: [], isShowCheck: false })
        Bubble.success(getLabel(83551, '保存成功！'), 2);
        this.props.history.go(-1);
    }
    onOk = () => {
        const { verifyAgentOverlap, initDatas, setInitDatas } = this.props.wfAgentStore;
        const { selectedRowKeys, beginDate, beginTime, endDate, endTime } = initDatas;
        let params = { beginDate, beginTime, endDate, endTime, agentids: toJS(selectedRowKeys).join(","), method: "editBatch" }
        let beginDT = Date.parse(new Date(beginDate + " " + (beginTime ? beginTime : "00:00") + ":00"));
        let endDT = Date.parse(new Date(endDate + " " + (endTime ? endTime : "23:59") + ":00"));
        if (beginTime && !beginDate) {
            Bubble.warning(getLabel(127684, '设置开始时间必须设置开始日期'), 2);
        } else if (endTime && !endDate) {
            Bubble.warning(getLabel(127685, '设置结束时间必须设置结束日期'), 2);
        } else if (endDT <= beginDT) {
            Bubble.warning(getLabel(127683, "结束时间不能小于等于开始时间"), 2);
        } else {
            if (params.beginDate === null) {
                params.beginDate = "";
            }
            if (params.endDate === null) {
                params.endDate = "";
            }
            if (params.beginTime === null) {
                params.beginTime = "";
            }
            if (params.endTime === null) {
                params.endTime = "";
            }
            setInitDatas({ batchEditParams: params })
            verifyAgentOverlap(params, this.callback_verifyAgentOverlap);
        }
    }
    onCheckBoxChange = (val) => {
        const { setInitDatas } = this.props.wfAgentStore;
        setInitDatas({ batChradioChecked: val })
    }
    render() {
        const { setInitDatas, initDatas } = this.props.wfAgentStore;
        const { batchShowCheckModal, batChradioChecked, batchModalTitle, batch_isShowLoading } = initDatas;
        const btns = [{
            key: 'cancle',
            text: getLabel(201, "取消"),
            onClick: () => {//跳页面
                const { setInitDatas } = this.props.wfAgentStore;
                setInitDatas({ propsVisiable: false, isShowCheck: false })
                this.props.history.go(-1);
            },
            type: '',
        }, {
            key: 'save',
            text: getLabel(86, "保存"),
            onClick: this.onOk,
            type: 'primary',
        }]
        return (
            <div className="batchEdit">
                <div className='wf-agent-batchedit-wrap'>
                    <div className="addAgent-form" >
                        {this.getSearchs()}
                        {batchShowCheckModal &&
                            <Modal
                                visible={batchShowCheckModal}
                                transparent
                                title={batchModalTitle}
                                footer={batchShowCheckModal && [
                                    {
                                        text: getLabel(201, "取消"), onPress: () => {
                                            setInitDatas({ batchModalTitle: "", batchShowCheckModal: false, batChradioChecked: 1 })
                                        }
                                    },
                                    {
                                        text: getLabel(826, '确定'), onPress: () => {
                                            const { wfAgentStore } = this.props;
                                            const { initDatas, saveBatchEditInfo } = wfAgentStore;
                                            const { batchEditParams } = initDatas;
                                            setInitDatas({ batchShowCheckModal: false })
                                            saveBatchEditInfo(batchEditParams, this.callback_saveBatchEditInfo);
                                        }
                                    }
                                ]}
                            >
                                {batchShowCheckModal && <div>
                                    <AgreeItem
                                        style={{ marginLeft: "0" }}
                                        key={1}
                                        defaultChecked
                                        checked={batChradioChecked === 1 ? true : false}
                                        onChange={() => this.onCheckBoxChange(1)}
                                    ><span style={{ fontSize: "13px" }}>{getLabel(82669, "从新保存的代理设置中去除重复设置内容")}</span>
                                    </AgreeItem>
                                    <AgreeItem
                                        style={{ marginLeft: "0" }}
                                        key={2}
                                        checked={batChradioChecked === 2 ? true : false}
                                        onChange={() => this.onCheckBoxChange(2)}
                                    ><span style={{ fontSize: "13px" }}>{getLabel(82670, "以新保存的代理设置替换已有重复的代理设置")}</span>
                                    </AgreeItem>
                                    {/**下面的代码也是可以达到相同的效果 */}
                                    {/* <Radio checked={batChradioChecked === 1 ? true : false} onChange={() => this.onCheckBoxChange(1)}>Agree</Radio>
                        <Radio checked={batChradioChecked === 2 ? true : false} onChange={() => this.onCheckBoxChange(2)}>Agree</Radio> */}
                                </div>}
                            </Modal>
                        }
                    </div>
                    {batch_isShowLoading && <ActivityIndicator
                        toast
                        text={getLabel(500408 , "加载中...")}
                        animating={batch_isShowLoading}
                    />}
                    <div className='wf-agent-batchedit-button-group'>
                        <ButtonGroup data={btns} />
                    </div>
                </div>
            </div>
        )
    }
}